<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: #000;
        }
    </style>
</head>
<body>
<div class = "box"></div>
<script>
    /*
    * this 调用函数的主体对象
    *   1.没有明确的调用者 this -> window
    *   2.对象.函数() this -> 对象
    *
    *
    * 理解：this存在的意义：让函数执行的过程中变得更加灵活，一个函数适用多个对象
    *
    * 构造函数的this this指向改变 箭头函数的this
    *
    *
    * */

    //console.log(this) //直接指向了浏览器对象 window

    //抽象出了按键和速度变化的映射关系，用一个对象保存这些属性
    let keyMap = {
        //其中每一个按键都有各自独立的移动方式 依旧用独立的对象来保存其自身的移动方式属性
        w:{
            vx:0, //表示按下w键时 在x轴上的速度
            vy:-1
        },
        s:{
            vx:0,
            vy:1
        },
        a:{
            vx:-1,
            vy:0
        },
        d:{
            vx:1,
            vy:0
        },
    }

    //target 就是 键盘被按下的值
    function moveTo(target){
        //键盘被按下分为两种情况
        //第一种：
        if(!["w","s","a","d"].includes(target)){ //如果按下的按键不包含w s a d就直接退出
            return //函数内部出现了return 就表示这个函数已经结束了 不会再往下执行了 也就是如果出现了第一种情况 第二种情况就不会生效
        }

        //除去以上那种就剩下这一种
        //如果按下的按键包含 w s a d
        this.x += keyMap[target].vx*10 //根据键盘按键查询表中访问对应属性变换并且计算出对应的值 keyMap是一个对象 target泛指对象里面的属性
        this.y += keyMap[target].vy*10 //keyMap[target] 就是访问对象keyMap 里面的某个属性 所对应的属性值
        this.el.style.transform = `translate(${this.x}px,${this.y}px)`
    }

    let box ={
        el:document.querySelector(".box"), //你需要操作的元素盒子
        x:0, //盒子的初始位置坐标x
        y:0, //盒子的初始位置坐标y
        moveTo:moveTo
    }

    //浏览器监听 键盘被按下 只要键盘被按下 后面的函数就执行
    window.onkeydown = function (e){
        box.moveTo(e.key) //e.key 就是按下的那个按键的符号的属性所对应的值 函数执行 这里传的是实参
    } //当按键被按下 box对象就调用内部的moveTo函数方法 moveTo函数就是前面第二段定义好的函数 其中target是形参 接收被按下的那个按键的实参值




</script>
</body>
</html>